<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-16 14:31:00
 *@version: V1.0.5
-->
<template>
<transition name="lm-toast">
  <div v-show="visible" :class="['toast', toastClass]">
    <div class="content">
      <slot v-if="!enableHtml"></slot>
      <span v-else v-html="$slots.default[0]"></span>
    </div>
    <div class="line" v-if="closeButton"></div>
    <span class="close" v-if="closeButton" @click="onClickClose">
      {{ closeButton.text }}
    </span>
  </div>
</transition>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  props: {
    //   是否自动关闭
    autoClose: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 是否自动关闭时间
    autoCloseDelay: {
      type: [String, Number],
      default() {
        return 5000;
      },
    },
    // 是否显示关闭按钮
    closeButton: {
      type: Object,
      default() {
        return null;
      },
    },
    // 是否开启html格式message
    enableHtml: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // toast出现位置
    position: {
      type: String,
      default: "top",
      validator(value) {
        return ["top", "bottom", "middle"].indexOf(value) >= 0;
      },
    },
  },
  mounted() {
    this.visible = true
    this.execAutoClose();
  },
  computed: {
    toastClass() {
      return `position-${this.position}`;
    },
  },
  methods: {
    execAutoClose() {
      if (this.autoClose) {
        setTimeout(() => {
          this.close();
        }, Number(this.autoCloseDelay));
      }
    },
    close() {
      this.visible = false
      this.$el.remove();
      this.$emit("close");
      this.$destroy();
    },
    onClickClose() {
      this.close();
      if (this.closeButton && typeof this.closeButton.callback === "function") {
        this.closeButton.callback(this.close);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$font-size: 14px;
$toast-min-height: 40px;
$toast-bg: rgba(0, 0, 0, 0.75);

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  font-size: $font-size;
  line-height: 1.8;
  min-height: $toast-min-height;
  display: flex;
  align-items: stretch;
  background: $toast-bg;
  border-radius: 4px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 9999;
  //   padding: 0 16px;
  &.lm-toast-enter-active, &.lm-toast-leave-active {
    transition: all .3s;
  }
  .content {
    padding: 5px 16px;
    display: flex;
    align-items: center;
  }
  .line {
    flex-shrink: 0;
    border-left: 1px solid #666;
  }
  .close {
    flex-shrink: 0;
    padding: 0 16px;
    display: inline-block;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  &.position-top {
    top: 10px;
    &.lm-toast-enter, &.lm-toast-leave-to /* .fade-leave-active below version 2.1.8 */ {
        transform: translate(-50%,-100%);
        opacity: 0;
    }
  }
  &.position-bottom {
    bottom: 10px;
    &.lm-toast-enter, &.lm-toast-leave-to /* .fade-leave-active below version 2.1.8 */ {
        transform: translate(-50%,100%);
        opacity: 0;
    }
  }
  &.position-middle {
    top: 50%;
    transform: translate(-50%, -50%);
    
    &.lm-toast-enter, &.lm-toast-leave-to /* .fade-leave-active below version 2.1.8 */ {
        transform: translate(-50%, -70%);
        opacity: 0;
    }
  }
}
</style>
